/*
 * @Author: cyfqyb
 * @Date: 2023-09-28 09:54:10
 * @LastEditors: cyfqyb cy15770703229@163.com
 * @LastEditTime: 2023-11-06 16:45:14
 * @FilePath: \ImBackend\src\view\admin.tsx
 * @Description: 介绍
 */
//背景图片
import { Input, message, notification } from "antd";
import { useState } from "react";
import { useNavigate } from "react-router-dom";
import userStore from "@/store/User.ts";
import { debounce } from "@/utils";
export function Admin() {
	const [password, setPassword] = useState<string>("root");
	const [account, setAccount] = useState<string>("admin");
	const navigate = useNavigate();

	const login = () => {
		if (account === "" || password === "") {
			message.error("账号或密码不能为空");
			return;
		}
		if (account !== "admin" || password !== "root") {
			message.error("账号或密码错误");
			return;
		}
		userStore.setCredentials(account, password);
		notification.success({
			message: "登录成功",
			description: "欢迎使用后台管理系统",
		});
		navigate("/home", { replace: true, state: { account, password } });
	};
	return (
		<>
			<div className="bg-[url(/bg.png)] wh100 bg-cover bg-no-repeat flex-items-center flex flex-justify-center">
				<div className="w600 h350 position-relative bg-#fff9f9 op-90">
					<div className="w-full text-center font-size-24 pl0 pr0 pt20 pb20">后台管理系统</div>
					<div className="flex w350 ml100 mt30">
						<span className="text-center flex-shrink-0">账号:</span>
						<Input
							placeholder="请输入账号"
							defaultValue={account}
							allowClear
							onChange={e => setAccount(e.target.value)}
						/>
					</div>
					<div className="flex w350 ml100 mt30">
						<span className="text-center flex-shrink-0">密码:</span>
						<Input.Password
							placeholder="请输入密码"
							defaultValue={password}
							allowClear
							onChange={e => setPassword(e.target.value)}
						/>
					</div>
					<button
						onClick={debounce(login, 500)}
						className="position-absolute left-50% mt50 translate--50% w200 h30 bg-[rgba(103,128,43)] translate-x--50% color-#fff9f9 b-rd-5 b-0 hover:scale-110 hover:translate-x--50%"
					>
						登录
					</button>
				</div>
			</div>
		</>
	);
}
